<template>
  <div class="conetnt-page">
    <div class="bgbanner flex-center">
      <div class="title">{{tagTitle}}</div>
    </div>
    <div class="taglist">
      <div @click="selectChange(item)" v-for="(item,index) in tagList" :key="index" :class="['tag',listQuery.cId == item.cid ? 'tag-act' : '']">{{item.name}}</div>
    </div>
    <transition name="fade">
      <div class="actcleList">
        <div @click="toDeatil(item)" v-for="(item,index) in listData" :key="index" class="item">
          <h4 class="title">{{item.title}}</h4>
          <div class="desc tline4">{{item.dsc}}</div>
          <div class="time">{{item.createTime}}</div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { getList,getClassList } from "@/api/index.js" 
  export default {
    data() {
      return {
        tagList:[],
        listData:[],
        tagTitle:'InterView',    
        isDoing:false,
        isOver:false,
        listQuery:{
          page:1,
          size:20,
          cId:""
        },
      }
    },
    async mounted(){
      await this.getCList();
      this.getScroolList();
      window.addEventListener('scroll',()=>{
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        //滚动条到底部的条件
        if(scrollTop+windowHeight >= scrollHeight){
          this.getScroolList();
        } 
      })
    },
    methods: {
      // 获取所有分类
      getCList(){
        return new Promise((reslove,reject)=>{
          getClassList({}).then(res=>{
            this.tagList = res.data
            if(this.tagList && this.tagList[0]){
              let item = this.tagList[0]
              this.tagTitle = item.name
              this.listQuery.cId = item.cid
            }
            reslove(this.tagList)
          })
        })
      },
      // 获取当前cid下的所有文章
      getScroolList(){
        if(this.isDoing || this.isOver) return
        this.isDoing = true
        this.getBList(this.listQuery).then((res)=>{
          this.isDoing = false
          this.listQuery.page++
          this.isOver = res.data.length < this.listQuery.size 
          this.listData = [...this.listData,...res.data]
        })
      },
      getBList(params = {}) {
        return new Promise((reslove,reject)=>{
          getList(params).then(res=>{
            reslove(res.data)
          })
        })
      },
      // 选择分类
      async selectChange(item){
        const data = await this.getBList({
          page:1,size:20,cId:item.cid
        })   
        this.tagTitle = item.name
        this.listQuery.cId = item.cid
        this.listData = data.data
      },
      // 跳转文章详情
      toDeatil(item){
        this.$router.push({
          path:"/detail",
          query:{
            bid:item.bid
          },
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
.conetnt-page{
  background-color: #fff;
  padding-bottom: 100px;
  .bgbanner{
    height: 600px;
    background:linear-gradient(180deg,rgba(0,0,0,.2) 0,transparent) ;
    .title{
      font-size: 3rem;
      font-weight: 400;
      color: #fff;
      font-family: Comic Sans MS,curslve,sans-serif;
    }
  }
  .taglist{
    text-align: center;
    .tag{
      display: inline-block;
      padding: 0px 12px;
      height: 30px;
      line-height: 30px;
      margin: 0px 6px;
      margin-bottom: 10px;
      cursor: pointer;
      border-radius: 5px;
      border: 1px solid #d2d2d2;
      color: rgba(0,0,0,.8);
      background-color: #f7f7f7;
      transition: all .3s;
      &:hover{
        background-color: #555;
        border-color: #555;
        color: #fff;
      }
    }
    .tag-act{
      background-color: #555;
      border-color: #555;
      color: #fff;
    }
  } 
  .actcleList{
    margin: 0 auto;
    margin-top: 30px;
    width: 100%;
    max-width: 1200px;
    .item{
      padding: 20px 30px;
      border-radius: 5px 5px 0px 0px;
      border-bottom: 1px solid #eee;
      transition: 0.5s;
      cursor: pointer;
      .title{
        font-size: 32px;
        color: #404040;
        margin-bottom: 5px;
      }
      .desc{
        font-size: 16px;
        color: #919191;
      }
      .time{
        font-size: 14px;
        color: #919191;
      }
      &:hover{
        transition: 0.5s;
        background-color: rgba(0,0,0,.02);
      }
      &:last-child{
        border-bottom: none;
      }
    }
  }
}
@media screen and(max-width:720px) {
  .conetnt-page{
    .bgbanner{
      height: 250px;
    }
    .actcleList{
      .item{
        padding: 12px 15px;
        .title{
          font-size: 26px;
          margin-bottom: 0px;
        }
        .desc{
          font-size: 14px;
        }
        .time{
          font-size: 12px;
        }
      }
    }
  }
}
.conetnt-page .bgbanner .title{
  font-size: 2rem;
}
</style>
